<!DOCTYPE html>
<html>
<head>
    <title>提交列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/global_data.js"></script>
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>

    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="backstage/css/style.css">
    <link rel="stylesheet" type="text/css" href="backstage/css/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <style>
        td {
            height: 5vh;
        }
        textarea{
            float: left;
            outline-color: invert ;
            outline-style: none ;
            outline-width: 0px ;
            border: none ;
            border-style: none ;
            text-shadow: none ;
            -webkit-appearance: none ;
            -webkit-user-select: text ;
            outline-color: transparent ;
            box-shadow: none;
            height: 100%;
            resize:none;
            font-size: 17px;
            font-family:Consolas;
        }

    </style>
</head>
<div id="shadow2" style="display: none;z-index: 1000000;position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.5);">
    <div id="mycode" style="display:none;height: 700px;width: 900px;left: 29%;top: 10%; position: absolute;border-radius: 10px;" class="well">
        <div style="display: flex"><h3 style="width: 95%">编译结果</h3><button id="codeclose" class="btn btn-info" style="border-radius: 7px;border: none;color: white;background: rgba(0,0,0,0.18);width: 8%"><i class="fa fa-close fa-2x"></i></button></div>
        <hr>
        <div class="row" style="height: 65%">
            <div class="col-lg-2"><h4>代码</h4></div>
            <div class="col-lg-10" style="height: 100%">
                <textarea id="area1" style="width: 3%;color: rgba(136,136,136,1.00);background-color:rgb(230,230,230);text-align: center;overflow-y:hidden;overflow-x: hidden" disabled></textarea>
                <textarea id="area2" style="width: 97%;color: black;background-color: rgb(240,240,240)" onscroll="myscroll()" readonly></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2"><h4>编译器输出</h4></div>
            <div class="col-lg-10">
                <textarea id="area3" class="well" style="width: 100%;color: black;background-color: rgb(233,236,239)" readonly></textarea>
            </div>
        </div>
    </div>
</div>
<body class="flat-blue">
<div class="app-container">
    <div class="row content-container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-expand-toggle">
                        <i class="fa fa-bars icon"></i>
                    </button>
                    <ol class="breadcrumb navbar-breadcrumb">
                        <li class="active">提交列表</li>
                    </ol>
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-th icon"></i>
                    </button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-times icon"></i>
                    </button>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bell-o"></i></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="title">
                                系统通知 <span class="badge pull-right">0</span>
                            </li>
                            <li class="message">
                                没有新消息
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown danger">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-users"></i> 4</a>
                        <ul class="dropdown-menu danger  animated fadeInDown">
                            <li class="title">
                                好友列表 <span class="badge pull-right">3</span>
                            </li>
                            <li>
                                <ul class="list-group notifications">
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge">1</span> <i class="fa fa-mars icon"></i> 吴永康
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge success">1</span> <i class="fa fa-venus icon"></i> 李文俊
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item message">
                                            view all
                                        </li>
                                    </a>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown profile">
                        <a href="#" id="LoginOutTitleName" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="profile-img">
                                <img src="backstage/img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                            </li>
                            <li>
                                <div class="profile-info">
                                    <h4 class="username" id="LoginOutName"></h4>
                                    <p id="LoginOutEmail"></p>
                                    <div class="btn-group margin-bottom-2x" role="group">
                                        <button onclick="loginOut()" type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> 登出</button>
                                        <script>
                                            function loginOut() {
                                                localStorage.removeItem("userToken");
                                                window.location="login.html";
                                            }
                                        </script>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="side-menu sidebar-inverse">
            <nav class="navbar navbar-default" role="navigation">
                <div class="side-menu-container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <div class="icon fa fa-cloud"></div>
                            <div class="title">问题反馈</div>
                        </a>
                        <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav">
                        <!-- 被选中的框-->
                        <li>
                            <a href="userMessage.html">
                                <span class="icon fa fa-user"></span><span class="title">个人信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="CodeAndCode.html">
                                <span class="icon fa fa-file-code-o"></span><span class="title">代码对弈</span>
                            </a>
                        </li>

                        <li>
                            <a href="RobotLode.html">
                                <span class="icon fa fa-android"></span><span class="title">人机对弈</span>
                            </a>
                        </li>
                        <!--  提交列表-->
                        <li class="active">
                            <a href="SubmitList.html">
                                <span class="icon fa fa-list"></span><span class="title">提交列表</span>
                            </a>
                        </li>

                        <li>
                            <a href="UserMatch.html">
                                <span class="icon glyphicon glyphicon-stats"></span><span class="title">赛事</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>



        <!-- 动态加载提交列表 -->
        <div class="container-fluid">
            <div id="mainArea" class="side-body padding-top">
                <center id="cennum" style="display: none;font-family: 幼圆;font-size: 20px;color: grey;">当前有&nbsp;<span id="subnum">1</span>&nbsp;条记录正在加载中<i class="fa fa-spinner fa-pulse"></i></center>

                <div class="no-margin-bottom row" id="mybody" style="height: 87vh;background-color: white" align="center">
                    <table id="SubmitListTable" class="table table-hover" style="position: relative;top: 1%">
                        <!-- js动态加载内容-->
                    </table>
                </div>

            </div>
        </div>
    </div>

    <!-- 弹出层代码-->
    <div id="shadow" style="display:none;z-index: 1000000;position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.5);">
        <div id="pop" style="display:none;height: 600px;width: 500px;left: 36%;top: 10%; position: absolute;border-radius: 10px;text-align: center;" class="well">


        </div>
    </div>
    <!-- ************弹出层end*******************-->

    <!-- Javascript Libs -->
    <script src="js/sweet-alert.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="backstage/js/app.js"></script>
    <script type="text/javascript" src="backstage/js/index.js"></script>

    <script type="text/javascript" src="js/SubmitList.js"></script>

</div>
</body>
<script>
    // 判断用户有没有登录信息，没有的话自动登录跳转到登录页面
    let userMessage={};
    $.ajax({
        async: false,
        type: "post",
        data:'{"userToken":"'+localStorage.getItem("userToken")+'"}',
        url: serverIpAddress+"User/LodeUserMessage",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success:function (data) {
            userMessage = data;
        },
        error:function () {
            window.location="login.html";
        }
    });
    $("#LoginOutTitleName").html(userMessage.name+"<span class=\"caret\"></span>");
    $("#LoginOutName").html(userMessage.name);
    $("#LoginOutEmail").html(userMessage.email);



    //nextCheer中1为当前应该下黑棋，-1为当前应该下白棋
    var SubmitListTable=[], NowCheer = 0,process, runTimes;//每一步的运行时间,以及当前所下的棋子

    SubmitListTableLode();

    //***************开始复盘代码***************
    function LodeBackCheer(data) {
        if(SubmitListTable[data].process === "" || SubmitListTable[data].process === null)
            swal("错误","无法复盘,没有记录","error");
        else {
            var mainCode = "<h3>该步耗时:&nbsp;<span style='color: rgb(131,196,119)' id=\"runTime\"></span>&nbsp;ms</h3>\n" +
                "            <hr width=\"100%\"/>\n" +
                "            <img src=\"backstage/img/qipan.jpg\" width=\"400px\" height=\"400px\" style=\"border-radius: 10px\">\n" +
                "            <hr width=\"100%\"/>\n" +
                "            <a href=\"javascript:leftStep()\"><i class=\"fa fa-arrow-left fa-3x\" style=\"float:left; left: 100px;position: absolute;\"></i></a>\n" +
                "            <button onclick='closeBackCheer()' class=\"btn btn-info\" style=\"background-color: rgb(51,51,51);color: white;border-color: rgb(51,51,51);border-radius: 7px\">关闭</button>\n" +
                "            <a href=\"javascript:rightStep()\"><i class=\"fa fa-arrow-right fa-3x\" style=\"float:right;right: 100px;position: absolute\"></i></a>";
            document.getElementById("pop").innerHTML = mainCode;
            process = SubmitListTable[data].process.split("#");
            process.pop();
            runTimes = SubmitListTable[data].runTime.split("#");
            runTimes.pop();
            NowCheer = 0;
            var x = Number(process[NowCheer]), y;
            y = x % 100;
            x = Math.round(x / 100);
            if (NowCheer % 2 === 0) {
                AddBlackCheer(x, y);
            } else {
                AddWhiteCheer(x, y);
            }
            document.getElementById("runTime").innerText = runTimes[NowCheer];
            NowCheer += 1;
            $("#shadow").fadeIn(300);
            $("#pop").fadeIn(300);
        }
    }


    function closeBackCheer() {
        $("#shadow").fadeOut(300);
        $("#pop").fadeOut(300);
        $("#pop").html("");
    }

    function leftStep() {
        if(NowCheer < 2)
            swal("错误","已经是第一步了","error");
        else {
            document.getElementById("runTime").innerText = runTimes[NowCheer-2];
            var position = Number(process[NowCheer - 1]);
            $("#cheer" + position).remove();
            NowCheer -= 1;
        }
    }

    function rightStep() {
        if(NowCheer+1 > process.length)
            swal("错误","已经是最后一步了","error");
        else {
            var x = Number(process[NowCheer]), y;
            y = x % 100;
            x = Math.round(x / 100);
            if (NowCheer % 2 === 0) {
                AddBlackCheer(x, y);
            } else {
                AddWhiteCheer(x, y);
            }
            document.getElementById("runTime").innerText = runTimes[NowCheer];
            NowCheer += 1;
        }
    }

    var blackleft=53,blacktop=110;//0代表下一步下黑棋，1代表下一步下白棋
    function AddBlackCheer(x,y) {
        var position = x*100 + y;
        var a=blackleft+26*y;
        var b=blacktop+26*x;
        $("#pop").append("<img id='cheer"+position+"' src='backstage/img/blackCheer.png' width='28' height='27' style='position: absolute;left: "+a+"px;top:"+b+"px' >");
    }
    var whiteleft=47,whitetop=107;
    function AddWhiteCheer(x,y) {
        var position = x*100 + y;
        var a=whiteleft+26*y;
        var b=whitetop+26*x;
        $("#pop").append("<img id='cheer"+position+"'src='backstage/img/whiteCheer.png' width='38' height='36' style='position: absolute;left: "+a+"px;top:"+b+"px' >");
    }



    function LookUser(data) {
        window.location = "LookOtherUser.html?user=" + data;
    }

    function LookCode(data) {
        var code=SubmitListTable[data].code;
        var error=SubmitListTable[data].error;
        $("#area2").val(code);
        if(error==="") {
            error="运行成功，无错误信息"
        }
        $("#area3").val(error.substring(error.indexOf("#")+1));
        var length=code.split("\n").length;
        var temp="";
        var wid=0;
        for(var i=1;i<=length;i++) {
            temp=temp+i+"\n";
        }
        while(length>=10) {
            length/=10;
            wid++;
        }
        $("#area1").css("width",3+wid+"%");
        $("#area2").css("width",97-wid+"%");
        $("#area1").val(temp);
        $("#shadow2").fadeIn(300);
        $("#mycode").fadeIn(300);
    }
    //代码错误信息将加载在查看代码下面
    $("#codeclose").click(function () {
        $("#mycode").fadeOut(300);
        $("#shadow2").fadeOut(300);
    })
    //加载列表
    function SubmitListTableLode() {
        var tableZero = "<tr style=\"height: 4vh;background-color: rgb(247,247,247)\"><td><strong>提交时间</strong></td><td><strong>状态</strong></td><td><strong>编译器</strong><td><strong>代码</strong></td><td><strong>对手</strong></td><td><strong>执棋</strong></td><td><strong>胜负</strong></td><td><strong>复盘</strong></td></tr>";
        var tableOne = "<tr><td style='vertical-align: middle;'>",tableTwo = "</td><td style='vertical-align:middle;color:";
        var tableThree = "'>",tableFour = "</td><td style='vertical-align:middle'>",tableFive = "</td><td style='vertical-align:middle'><a style='color:#00aeff' href='javascript:LookCode(";
        var tableSix = ")'><u>点击查看</u></a></td><td style='vertical-align:middle'><a style='color: #8e43e7' href='javascript:LookUser(\"";
        var tableSeven = "\")'><u>",tableEight = "</u></a></td><td style='vertical-align:middle'>";
        var tableNine = "</td><td style='vertical-align:middle;color:";
        var tableTen = "'>",tableOneOne = "</td><td style='vertical-align:middle'><a href='javascript:LodeBackCheer(";
        var tableOneTwo = ")'><u>点击复盘</u></a></td></tr>";
        var i, code = "", soon;

        $.ajax({
            async: false,
            type: "post",
            url: serverIpAddress+"SubmitList/GetSubmitList",
            data:'{"userToken":"'+localStorage.getItem("userToken")+'"}',
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success:function (data) {
                SubmitListTable = data;
            }
        });

        for(i = 0; i <SubmitListTable.length; i++) {
            soon = SubmitListTable[i];
            code += tableOne + soon.date + tableTwo;
            if(soon.error.substring(0,soon.error.indexOf("#")) === "编译错误")
                code += "rgb(27,117,220)" + tableThree + "编译错误" + tableFour;
            else if(soon.error.substring(0,soon.error.indexOf("#")) === "运行错误") {
                if(soon.error.indexOf("Exception in thread \"main\" java.lang.")!="-1") {
                    code += "rgb(153,51,153)" + tableThree + "内存溢出" + tableFour;
                }
                else {
                    code += "rgb(255,204,153)" + tableThree + "运行错误" + tableFour;
                }
            }
            else if(soon.error.substring(0,soon.error.indexOf("#")) === "运行超时")
                code += "rgb(0,170,0)" + tableThree + "运行超时" + tableFour;
            else
                code += "red" + tableThree + "运行成功" + tableFour;
            if(soon.language === "java")
                code += "java(jdk-1.8.0_202)";
            else if(soon.language === "c++")
                code += "c++(g++4.9.2)";
            else if(soon.language === "c")
                code += "c(gcc4.9.2)";
            code += tableFive + i + tableSix + soon.fightWith + tableSeven + soon.fightWith + tableEight;
            if(soon.myCheer === "black")
                code += "黑棋" + tableNine;
            else if(soon.myCheer === "white")
                code += "白棋" + tableNine;
            else
                code += "无" + tableNine;
            if(soon.winner === "lose")
                code += "rgb(0,204,163)" + tableTen + "失败" + tableOneOne;
            else if(soon.winner === "win")
                code += "red" + tableTen + "胜利" + tableOneOne;
            else
                code += "blue" + tableTen + "平局" + tableOneOne;
            code += i + tableOneTwo;
        }
        document.getElementById("SubmitListTable").innerHTML = tableZero + code;
    }
    function myscroll() {
        $("#area1").scrollTop($("#area2").scrollTop());
    }

    var timeflag=false,dataflag=0;
    subnum();
    setInterval("subnum()",1500);
    function subnum() {
        $.ajax({
            async: false,
            type: "post",
            data:'{"userToken":"'+localStorage.getItem("userToken")+'"}',
            url: serverIpAddress+"SubmitList/GetRunCodeNum",
            contentType: "application/json;charset=utf-8",
            success:function (data) {
                if(data!=0) {
                    if(timeflag==false) {
                        timeflag=true;
                        dataflag=data;
                    }
                    else {
                        if(dataflag>data) {
                            window.location.reload();
                        }
                    }
                    $("#subnum").html(data);
                    $("#cennum").show();
                }
                else {
                    $("#cennum").hide();
                    if(dataflag>data) {
                        window.location.reload();
                    }
                }
            }
        });
    }
</script>

</html>

